<template>
  <div class="simple-table-container">
    <div class="section-title">
      <div class="section-title-text">
        {{ title }}
      </div>

      <div class="table-filters" v-if="filters">
        <label v-for="item in filters" :key="item.value" class="filter-label">
          <input
            type="checkbox"
            :checked="checkedFilters && checkedFilters.includes(item.value)"
            @change="$emit('filter-change', item.value)"
          />
          {{ item.label }}
        </label>
      </div>
    </div>
    <el-divider class="section-divider" />
    <div class="simple-table-wrapper">
      <div class="table-title-row">
        <span class="table-title">具体指标分析</span>
      </div>

      <table class="simple-table-detail">
        <thead>
          <tr>
            <th
              v-for="col in detailColumns"
              :key="col.prop"
              :style="{ width: col.width, color: '#999999' }"
            >
              {{ col.label }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in detailData" :key="row.index">
            <td v-for="col in detailColumns" :key="col.prop">
              {{ row[col.prop] }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="simple-table-wrapper">
      <div class="table-title-row">
        <span class="table-title">项目汇总分析</span>
      </div>
      <table class="simple-table-total">
        <thead>
          <tr>
            <th
              v-for="col in totalColumns"
              :key="col.prop"
              :style="{ width: col.width }"
            >
              {{ col.label }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in totalData" :key="row.index">
            <td v-for="col in totalColumns" :key="col.prop">
              {{ row[col.prop] }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  title: String,
  showCompare: Boolean,
  detailColumns: Array,
  detailData: Array,
  totalColumns: Array,
  totalData: Array,
  filters: Array,
  checkedFilters: Array,
});
const emit = defineEmits(["filter-change"]);
</script>

<style scoped>
.simple-table-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  border-radius: 8px;
  padding: 0;
  max-width: 100%;
}
.section-title {
  display: flex;
  font-size: 20px;
  font-weight: bold;
  color: #222;

  text-align: left;
  justify-content: space-between;
  align-items: center;
}
.section-title-text {
  /* flex: 1; */
  /* width: 200px; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 22px;
}
.section-divider {
  margin: -10px;
}
.simple-table-wrapper {
  width: 100%;
  max-width: 100%;
  padding: 0 0 0 0;
}
.table-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 16px;
}
.table-title {
  width: 100%;
  font-size: 20px;
  font-weight: bold;
  color: #222;
}
.table-filters {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-right: 20px;
  /* width: 100%; */
}
.filter-label {
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  transition: background 0.2s;
}
.filter-label input[type="checkbox"] {
  accent-color: #2468f2;
  margin-right: 2px;
}
.simple-table-detail,
.simple-table-total {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}
.simple-table-detail th,
.simple-table-total th {
  background: #fff;
  font-weight: bold;
  color: #999999;
  font-size: 15px;
  padding: 16px 12px;
  border-bottom: 1.5px solid #f0f0f0;
  text-align: left;
}
.simple-table-detail th:first-child,
.simple-table-detail td:first-child {
  width: 60px;
  text-align: left;
  font-weight: bold;
  color: #222;
}
.simple-table-detail td,
.simple-table-total td {
  border-bottom: 1px solid #f0f0f0;
  padding: 16px 12px;
  font-size: 15px;
  color: #222;
  background: #fff;
}
.simple-table-detail td:first-child,
.simple-table-total td:first-child {
  font-weight: bold;
  color: #222;
}
.simple-table-detail tr:last-child td,
.simple-table-total tr:last-child td {
  border-bottom: none;
}
.simple-table-detail tr,
.simple-table-total tr {
  transition: background 0.2s;
}
.simple-table-detail tr:hover,
.simple-table-total tr:hover {
  background: #fff;
}
.simple-table-detail th,
.simple-table-total th,
.simple-table-detail td,
.simple-table-total td {
  padding-left: 24px;
  padding-right: 24px;
}
</style>
